<template>
    <div class="app-container">
        <levelbar></levelbar>
        <div class="form-box" v-loading='loading'>
            <div class="form-title">查看设备类型</div>
            <el-form :model="dataForm" :rules="rules" ref="dataForm" label-width="95px" class="form">
                <div class="form-item">
                    <div class="form-item-title">
                        <span class="title-level">基础信息</span>
                    </div>
                    <div class="form-content">
                        <el-row :gutter="21">
                            <el-col :span="12">
                                <el-form-item label="类别：">
                                    <span>{{dataForm.classificationName}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="21">
                            <el-col :span="12">
                                <el-form-item label="设备类型：">
                                    <span>{{dataForm.typeName}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="21">
                            <el-col :span="9">
                                <el-form-item label="提供厂商">
                                    <el-select v-model="dataForm.sManufactorId" placeholder="请选择" style="width:95%" @change="changeFactor">
                                        <el-option v-for="item in sManufactorList" :key="item.pId" :label="item.sName" :value="item.pId">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item-title">
                        <span class="title-level">适用卡片信息</span>
                    </div>
                    <div class="form-content">
                        <div>
                            <el-row :gutter="21">
                                <el-col :span="12">
                                    <el-form-item label="支持卡片：">
                                        <span>{{dataForm.sCardType}}</span>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="21">
                                <el-col :span="12">
                                    <el-form-item label="刷卡方式：">
                                        <span>{{dataForm.sCardStyle}}</span>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="21">
                                <el-col :span="12">
                                    <el-form-item>
                                        <span>注：近距离贴刷0.05米以内；中距离：0.6米以内；远距离：10米以上</span>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item-title">
                        <span class="title-level">屏幕信息</span>
                    </div>
                    <div class="form-content">
                        <el-row :gutter="21">
                            <el-col :span="12">
                                <el-form-item label="有无屏幕：">
                                    <span>{{dataForm.sIsScreen}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="屏幕尺寸：">
                                    <span>{{dataForm.sScreenSize}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="操作性：">
                                    <span>{{dataForm.sIsOperability}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item-title">
                        <span class="title-level">其他功能</span>
                    </div>
                    <div class="form-content">
                        <el-row :gutter="21">
                            <el-col :span="12">
                                <el-form-item label="拍照功能：">
                                    <span>{{dataForm.sIsPhotograph}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="进出识别：">
                                    <span>{{dataForm.sIsDistinguish}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="分班播报：">
                                    <span>{{dataForm.sIsDivisionBroadcast}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="定位功能：">
                                    <span>{{dataForm.sIsLocation}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item-title">
                        <span class="title-level">详细描述</span>
                    </div>
                    <div class="form-content">
                        <el-row :gutter="21">
                            <el-col :span="22">
                                <el-form-item label="产品描述：">
                                    <span v-html="dataForm.sRemark" class="sRemark"></span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="21">
                            <el-col :span="24">
                                <el-form-item label="机器图片：">
                                    <div v-if="dataForm.imgSrc.length>0">
                                        <el-col :span="12" v-for="item in dataForm.imgSrc" :key="item">
                                            <div  class="img-box"><img :src="item"></div>
                                        </el-col>
                                    </div>
                                    <div v-if="dataForm.imgSrc.length==0" class="sRemark">暂无</div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                
                <div class="form-item">
                    <el-row>
                        <el-col :span="24">
                            <div class="footer">
                                <el-button @click="resetForm('dataForm')">返回</el-button>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
import Levelbar from '../../layout/Levelbar';
import {getDeviceInfo, getManufactorById} from 'api/attendanceManage';
// import { mapGetters } from 'vuex';

export default {
    name: 'getdeviceType',
    components: { Levelbar},
    data() {
        return {
            loading: false,
            tempStatus: 0,
            sManufactorList: [],
            dataForm: {
                sCardType: '',
                sCardStyle: '',
                sIsScreen: '',
                sScreenSize: '',
                sIsOperability: '',
                sIsPhotograph: '',
                sIsDistinguish: '',
                sIsDivisionBroadcast: '',
                sIsLocation: '',
                sRemark: '',
                sPic: '',
                typeName: '',
                sManufactorId: '',
                factoryName: '',
                imgSrc: ''
            },
            rules: {
        // 学校班级信息
                schoolName: [
                    { required: true, message: '内容不能为空', trigger: 'blur' }
                ],
                studentCode: [
                    { pattern: /^[A-Za-z0-9]+$/, message: '只允许输入数字和字母'},
                    { min: 1, max: 20, message: '长度在20个字符以内', trigger: 'blur' }
                ],
                grade: [
                    { required: true, message: '内容不能为空', trigger: 'blur' }
                ],
                classId: [
                    { required: true, message: '内容不能为空', trigger: 'blur' }
                ]
            }
        };
    },
    created() {
        this.getDevice();
    },
    methods: {
        resetForm(dataForm) {
            window.history.back();
        },
        changeFactor() {
            this.changeDev();
        },
        changeDev() {
            getDeviceInfo(this.$route.params.id, this.dataForm.sManufactorId).then(res => {
                if (res.data.content.sCardType=='0') {
                    this.dataForm.sCardType = 'IC卡';
                } else if (res.data.content.sCardType=='1') {
                    this.dataForm.sCardType = 'ID卡';
                } else {
                    this.dataForm.sCardType = '双频卡';
                }
                if (res.data.content.sCardStyle=='0') {
                    this.dataForm.sCardStyle = '近距离';
                } else if (res.data.content.sCardStyle=='1') {
                    this.dataForm.sCardStyle = '中距离';
                } else {
                    this.dataForm.sCardStyle = '远距离';
                }
                this.dataForm.sIsScreen = res.data.content.sIsScreen=='0' ? '有' : '无';
                this.dataForm.sScreenSize = res.data.content.sScreenSize || '--';
                if (res.data.content.sIsOperability=='0') {
                    this.dataForm.sIsOperability = '无操作';
                } else if (res.data.content.sIsOperability=='1') {
                    this.dataForm.sIsOperability = '触屏操作';
                } else {
                    this.dataForm.sIsOperability = '鼠标操作';
                }
                this.dataForm.sIsPhotograph = res.data.content.sIsPhotograph=='0' ? '有' : '无'
                this.dataForm.sIsDistinguish = res.data.content.sIsDistinguish=='0' ? '有' : '无'
                this.dataForm.sIsDivisionBroadcast = res.data.content.sIsDivisionBroadcast=='0' ? '有' : '无'
                this.dataForm.sIsLocation = res.data.content.sIsLocation=='0' ? '有' : '无'
                this.dataForm.sRemark = res.data.content.sRemark || '暂无';
                this.dataForm.typeName = res.data.content.typeName;
                this.dataForm.classificationName = res.data.content.classificationName;
                this.dataForm.imgSrc = res.data.content.sPic==null ? [] : res.data.content.sPic.split(';');
            })
        },
        getDevice() {
            getDeviceInfo(this.$route.params.id, this.dataForm.sManufactorId).then(res => {
                if (res.data.content.sCardType=='0') {
                    this.dataForm.sCardType = 'IC卡';
                } else if (res.data.content.sCardType=='1') {
                    this.dataForm.sCardType = 'ID卡';
                } else {
                    this.dataForm.sCardType = '双频卡';
                }
                if (res.data.content.sCardStyle=='0') {
                    this.dataForm.sCardStyle = '近距离';
                } else if (res.data.content.sCardStyle=='1') {
                    this.dataForm.sCardStyle = '中距离';
                } else {
                    this.dataForm.sCardStyle = '远距离';
                }
                this.dataForm.sIsScreen = res.data.content.sIsScreen=='0' ? '有' : '无';
                this.dataForm.sScreenSize = res.data.content.sScreenSize || '--';
                if (res.data.content.sIsOperability=='0') {
                    this.dataForm.sIsOperability = '无操作';
                } else if (res.data.content.sIsOperability=='1') {
                    this.dataForm.sIsOperability = '触屏操作';
                } else if (res.data.content.sIsOperability=='2') {
                    this.dataForm.sIsOperability = '鼠标操作';
                }
                console.log(res.data.content.sIsOperability, 'res.data.content.sIsOperability')
                this.dataForm.sIsPhotograph = res.data.content.sIsPhotograph=='0' ? '有' : '无'
                this.dataForm.sIsDistinguish = res.data.content.sIsDistinguish=='0' ? '有' : '无'
                this.dataForm.sIsDivisionBroadcast = res.data.content.sIsDivisionBroadcast=='0' ? '有' : '无'
                this.dataForm.sIsLocation = res.data.content.sIsLocation=='0' ? '有' : '无'
                this.dataForm.sRemark = res.data.content.sRemark || '暂无';
                this.dataForm.sManufactorId = res.data.content.sManufactorId;
                this.dataForm.typeName = res.data.content.typeName;
                this.dataForm.imgSrc = res.data.content.sPic==null ? [] : res.data.content.sPic.split(';');
                this.dataForm.classificationName = res.data.content.classificationName;
                getManufactorById(res.data.content.fDeviceId).then(response => {
                    this.sManufactorList = response.data.content;
                })
            })
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.app-container {
  position: relative;
  padding: 20px 20px 10px;
  $bgcolor: #fff;

  @mixin showTitle() {
    background: $bgcolor;
    box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
  }
  .form-box {
    padding: 0 50px;
    @include showTitle();
    .form-title {
      padding-top:8px;
      text-align: center;
      font-size: 18px;
      color: #333;
      line-height: 72px;
      font-weight: bold;
      font-family: Microsoft YaHei;
      border-bottom: 1px solid #ddd;
    }
    .form {
      .form-item {
        padding-bottom: 40px;
        .form-item-title {
            margin: 40px 0;
            font-size: 14px;
            color: #333;
            line-height: 14px;
            border-left: 4px solid #ff5e2c;
            text-indent: 16px;
           
          .note-css {
            vertical-align: middle;
            display: inline-block;
            width: 4px;
            height: 14px;
            margin-right: 26px;
            border-left: 3px solid #ff5e2c;
            // background: #30B08F url('../../../images/student/noteLavel.png') no-repeat 0 0;
          }
        }
        .form-content {
            margin: 0 8px;
        }
        .item {
          margin-bottom: 20px;
        }
        .back {
          margin-top: 20px;
        }
        .footer {
          //float: right;
          text-align: center;
          margin-top: 40px;
        }
        .title-way {
          padding-right: 15px;
        }
        .control {
          text-align: right;
        }
        .sRemark{
            color:#666;
            font-weight:"微软雅黑";
        }
        .img-box{
            width:100%;
            float:left;
            img{
                width:100%;

            }
        }
      }
    }
  }
}
</style>